

export function pagesElement(basicsData, crudData) {
  // 基础json数据
  let basicsJsonData = {};
  JSON.parse(JSON.stringify(basicsData)).forEach((element) => {
    basicsJsonData[element.columnName] = element;
  });
  // crud json数据
  let crudJsonData = {};
  JSON.parse(JSON.stringify(crudData)).forEach((element) => {
    crudJsonData[element.value] = element;
  });

  // });
  let tableData = table(crudJsonData.table.fieldData, basicsJsonData);
  let createData = create(crudJsonData.create.fieldData, basicsJsonData);
  let QueryData = Query(crudJsonData.search.fieldData, basicsJsonData);
  let EditData = Edit(crudJsonData.edit.fieldData, basicsJsonData);
  let DetailData = Detail(crudJsonData.detail.fieldData, basicsJsonData);

  let ListCode = ``;
  let createCode = ``;
  let QueryCode = ``;
  let EditCode = ``;
  let DetailCode = ``;

  let dataReturn = dataReturnCode(crudJsonData, basicsData);



  let filtersCode = pagesFilters(basicsJsonData, crudData);

  if (tableData) {
    ListCode = `
      <!-- 表格数据 -->
      <el-table
      :data="tableData"
      style="width: 100%">
  ${tableData}
  <el-table-column
  prop="name"
  label="操作"
   >
   <template slot-scope="scope">
          <a @click="handleUpdate(scope)">修改</a>
          <a-divider type="vertical" />
          <a @click="handleDetail(scope)">详情</a>
          <a-divider type="vertical" />
          <a href="#" @click="handleDelete(scope)">删除</a>
        </template>
   </el-table-column>
  
  </el-table>
  <!-- 分页区域 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      `;
  }

  if (createData) {
    createCode = `
      <!-- 添加对话框 -->
      <el-dialog
  title="添加"
  :visible.sync="createOpen"
  width="30%"
   >
   <el-form :model="form" :rules="rules" ref="createForm" label-width="100px" class="demo-ruleForm">
   ${createData}
   </el-form>
   
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="createOpen">确 定</el-button>
  </span>
</el-dialog>
  
      `;
  }

  if (QueryData) {
    QueryCode = `
      <!-- 检索对话框 -->
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      ${QueryData}
      <el-form-item>
      <el-button type="primary">搜索</el-button>
     <el-button>重置</el-button>
    </el-form-item>
      </el-form>
      `;
  }

  if (DetailData) {
    DetailCode = `
    <!-- 详情对话框 -->
    <el-dialog
    title="详情"
    :visible.sync="detailOpen"
    width="30%"
     >
     <el-form :model="form" :rules="rules" ref="createForm" label-width="100px" class="demo-ruleForm">
     ${DetailData}
     </el-form>
     
    <span slot="footer" class="dialog-footer">
      <el-button @click="detailOpen = false">取 消</el-button>
      <el-button type="primary" @click="detailOpen">确 定</el-button>
    </span>
  </el-dialog>
      `;
  }

  if (EditData) {
    EditCode = `
      <!-- 修改对话框 -->
      <el-dialog
      title="修改"
      :visible.sync="editOpen"
      width="30%"
       >
       <el-form :model="form" :rules="queryParams" ref="createForm" label-width="100px" class="demo-ruleForm">
       ${EditData}
       </el-form>
       
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOpen = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
      `;
  }

  return `
    <template>
   <div class="warp">
  ${QueryCode}
  ${ListCode}
  ${createCode}
  ${EditCode}
  ${DetailCode}
  
   </div>
  </template>

  <script>
  export default {
  data() {
  return {
    \/\/总页数
    total:0,
    form:{},
    tableData:[{
      id:1,
      name:"刘双龙",
      profession:"2",
      age:24
   }],
    queryParams:{},
  ${dataReturn},
  editOpen:false,
  detailOpen:false,
  createOpen:false
  };
  },
  filters: {
    professionOptions(a, b) {
      return b.filter((item) => item.value === a)[0].label;
    },
  },
  methods: {
    editSubmit() {
      console.log("debug log --> ", this.form);
    },
    detailSubmit() {
      console.log("debug log --> ", this.form);
    },
    createSubmit() {
      console.log("debug log --> ", this.form);
    },
    handleUpdate(data) {
      this.form = data;
      this.editOpen = true;
    },
    handleDetail(data) {},
    handleDelete(data) {
      this.form = data;
      this.detailOpen = true;
    },
  }
  };
  </script>
  `;
}
// 创建
function create(crudData, basicsDta) {

  let create = crudData.filter((item) => item.isAdopt);
  let code = "";

  create.forEach((element) => {

    code += formCodePage(element, basicsDta, 'create');
  });

  return code;
}
// 列表
function table(crudData, basicsDta) {
  let crud = crudData.filter((item) => item.isAdopt);
  let code = `
  `;
  crud.forEach((element) => {
    code += tableCodePage(element, basicsDta);
  });
  return code;
}
// 查询
function Query(crudData, basicsDta) {
  let query = crudData.filter((item) => item.isAdopt);
  let code = "";
  query.forEach((element) => {
    code += formCodePage(element, basicsDta, 'query');
  });
  return code;
}
// 查看
function Detail(crudData, basicsDta) {
  let detail = crudData.filter((item) => item.isAdopt);
  let code = "";
  detail.forEach((element) => {
    code += formCodePage(element, basicsDta, 'detail');
  });
  return code;
}
// 编辑
function Edit(crudData, basicsDta) {
  let edit = crudData.filter((item) => item.isAdopt);
  let code = "";
  edit.forEach((element) => {
    code += formCodePage(element, basicsDta, 'edit');
  });
  return code;
}

function tableCodePage(data, basicsDta) {
  if (
    basicsDta[data.value].fieldType === "input" ||
    basicsDta[data.value].fieldType === "textarea" ||
    basicsDta[data.value].fieldType === "number"
  ) {

    return `<el-table-column
    prop="date"
    :label="${basicsDta[data.value].label}"
    width="180" />`;
  }

  if (
    basicsDta[data.value].fieldType === "select" ||
    basicsDta[data.value].fieldType === "radio" ||
    basicsDta[data.value].fieldType === "checkbox"
  ) {
    return `<a-table-column title="${basicsDta[data.value].label}" data-index="${data.value}"><template slot-scope="text"> {{text | ${data.value}OptionsFilter(${data.value}Options)}} </template> </a-table-column>`;
  }

  if (
    basicsDta[data.value].fieldType === "date" ||
    basicsDta[data.value].fieldType === "time"
  ) {
    return `<a-table-column title="${basicsDta[data.value].label}" data-index="${data.value}"><template slot-scope="text">{{text | ${basicsDta[data.value].fieldType}Filter}}</template></a-table-column>`;
  }
}

function formCodePage(data, basicsDta, sign) {
  if (basicsDta[data.value].fieldType === "input") {
    return `<a-form-model-item  label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-input v-model="${sign === "query" ? 'queryParams' : 'form'}.${data.value}" placeholder="请选择${basicsDta[data.value].label}"/></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "number") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}>
    <a-input-number v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}"  />
  </a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "select") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-select v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}" placeholder="请选择${basicsDta[data.value].label}" :options="${data.value}Options"></a-select></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "radio") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-radio-group :options="${data.value}Options" v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}"></a-radio-group></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "checkbox") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-checkbox-group v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}" :options="${data.value}Options" /></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "datetime") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-date-picker @change="${data.value}DateChange" /></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "textarea") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-textarea v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}" placeholder="请输入" auto-size /></a-form-model-item>`;
  }

  if (basicsDta[data.value].fieldType === "switch") {
    return `<a-form-model-item   label="${basicsDta[data.value].label}" ${basicsDta[data.value].isRequired && (sign === "edit" || sign === "create") ? "prop=" + '"' + basicsDta[data.value].columnName + '"' : ""}><a-switch  v-model=" ${sign === "query" ? 'queryParams' : 'form'}.${data.value}"/></a-form-model-item>`;
  }
}

function dataReturnCode(crudData, basicsDta) {
  let options = basicsDta.filter(item => item.fieldType === 'select')
  let rules = basicsDta.filter(item => item.isRequired)
  let code = ``
  // options数据生成
  options.forEach(element => {
    code += `${element.columnName}Options:${JSON.stringify(element.options)},`
  });
  // rules数据生成
  if (rules.length > 0) {
    let rulesData = {}
    rules.forEach(element => {
      if (element.fieldType === 'input' || element.fieldType === 'number' || element.fieldType === 'textarea') { rulesData[element.columnName] = [{ required: true, message: `请输入${element.label}`, trigger: 'blur' }] }

      if (element.fieldType === 'select' || element.fieldType === 'checkbox' || element.fieldType === 'radio' || element.fieldType === 'switch' || element.fieldType === 'date' || element.fieldType === 'time') { rulesData[element.columnName] = [{ required: true, message: `请选择${element.label}`, trigger: 'change' }] }

    });

    code += `rules:${JSON.stringify(rulesData)}`
  }
  return code
}


function pagesFilters(basicsJsonData, crudData) {


}